package showcase

import (
	"github.com/templui/templui/internal/components/form"
	switchcomp "github.com/templui/templui/internal/components/switch"
)

templ SwitchForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@switchcomp.Switch(switchcomp.Props{
					ID:   "airplane-mode",
					Name: "airplane",
				})
				@form.Label(form.LabelProps{
					For: "airplane-mode",
				}) {
					Airplane Mode
				}
			}
			@form.ItemFlex() {
				@switchcomp.Switch(switchcomp.Props{
					ID:       "wifi-mode",
					Name:     "wifi",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "wifi-mode",
				}) {
					Wi-Fi
				}
			}
			@form.ItemFlex() {
				@switchcomp.Switch(switchcomp.Props{
					ID:      "bluetooth-mode",
					Name:    "bluetooth",
					Checked: true,
				})
				@form.Label(form.LabelProps{
					For: "bluetooth-mode",
				}) {
					Bluetooth
				}
			}
			@form.Description() {
				Manage your devices connectivity options.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please configure your connectivity settings.
			}
		}
	</div>
}
